iT邦幫忙

2021 iThome 鐵人賽

DAY 8
0
自我挑戰組

從零開始學習React 系列 第 8

Day08 React Props-組件屬性

  • 分享至 

  • xImage
  •  

component組件之間相互發送數據,傳遞數據的方式是使用 props。Props代表屬性,用於將數據從一個組件傳遞到另一個組件。
https://ithelp.ithome.com.tw/upload/images/20210923/20139800hcGLYKYZpN.png

今天透過實作,新增一個Card組件,在card組件中先把架構寫好

import React from 'react';


const Card = (props) => {
    return (
        <div>
         
          <div className="box">
           <h3>{props.title}</h3>
           <p>{props.of}</p>
           <img
            src={props.imgsrc}  />
           <a href="" class="btn">Buy now</a>
         </div>
            
        </div>
    )
}



export default Card

然後在App.js中匯入,並將app.js中的屬性數據傳入card.js中,
這樣card的內容將由app.js傳入的屬性數據所決定。

import React from 'react';
import Header1 from "./components/Header1";
import Header2 from "./components/Header2";
import Section1 from "./components/Section1";
import Card from "./components/Card";
import meal from "./assets/images/meal.png"; 
import meal01 from "./assets/images/meal01.png" 


const App = (props) => {
  return (
    <div>
      <Header1 />
      <Header2 />
      <Section1 />
      <Card
             
             title="Steak Meal" 
             of="upto 90% off"
             imgsrc ={meal}             
       />

     <Card             
             title="Hamburger" 
             of="upto 80% off"
             imgsrc ={meal01}             
       />  
       <Card
             
             title=" Pizza" 
             of="upto 70% off"
             imgsrc ={meal}             
       />        
      
    </div>
  )
}

export default App


上一篇
Day07 React之CSS樣式設定
下一篇
Day09 React Props- Array.map()
系列文
從零開始學習React 30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言